<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="选择店铺：" prop="sellerLoginId">
        <el-select v-model="queryParams.sellerLoginId" placeholder="请选择店铺" filterable class="width3">
          <el-option v-for="(item,index) in storeList" :key="index" :label="item.storeName"
                     :value="item.storeUserName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号：" prop="orderId">
        <el-input v-model="queryParams.orderId" placeholder="请输入订单编号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-button type="primary" size="mini" @click="isShowAeOrder = true">从速卖通获取全部订单</el-button>
      <el-button type="success" size="mini" @click="isShowAeOneOrder = true">从速卖通获取单个订单</el-button>
      <el-button type="primary" size="mini" @click="isOpenOfflineLogisticsOrder = true">线下物流单号</el-button>
      <el-button type="primary" size="mini" @click="isOpenSetSubmitSku = true" v-hasPermi="['system:erp_auto:click']">
        设置店铺不自动提交sku
      </el-button>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-button size="mini" type="primary" v-if="statusValue == 101" :disabled="multiple"
                 @click="$emit('selfShipment',chooseOrderList)" v-hasPermi="['system:erp-operate:edit']">转自发货
      </el-button>
    </el-row>
    <el-table v-loading="loading" default-expand-all row-key="id" :key="isChooseOrder" :data="groupOrderList" stripe
              border :row-class-name="tableRowClassName" :tree-props="{children: 'sellerChildOrderList'}">
      <el-table-column width="50" align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="checkAll" @change="selectAllCheckbox()"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <div v-if="!scope.row.childOrderId">
            <el-checkbox v-model="scope.row.checkValue" @change="changeCheckbox(scope.row)"></el-checkbox>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="买家信息" min-width="250">
        <template slot-scope="scope">
          <div v-if="!scope.row.childOrderId">
            <div>
              <span>买家姓名：</span>
              <span>{{ scope.row.aeStoreOrderReceiptAddress.contactPerson }}</span>
              <el-button class="ml10" size="mini" type="warning" @click="goChatPage(scope.row)">联系买家</el-button>
            </div>
            <div>
              <span>电话：</span>
              <span>
                {{ scope.row.aeStoreOrderReceiptAddress.phoneCountry + scope.row.aeStoreOrderReceiptAddress.mobileNo }}
              </span>
            </div>
            <div style="display: flex">
              <span>国家：</span>
              <span>
                <dict-tag :options="dict.type.county_code"
                          :value="scope.row.aeStoreOrderReceiptAddress.country"></dict-tag>
              </span>
            </div>
            <div>
              <span>收货地址：</span>
              <span>
                {{ scope.row.aeStoreOrderReceiptAddress.detailAddress }}
                {{ scope.row.aeStoreOrderReceiptAddress.city }}
                {{ scope.row.aeStoreOrderReceiptAddress.province }}
                {{ scope.row.aeStoreOrderReceiptAddress.country }}
                {{ scope.row.aeStoreOrderReceiptAddress.zip }}
              </span>
            </div>
          </div>
          <div v-else>
            <div class="img-box">
              <span>商品主图：</span>
              <imagePreview :src="scope.row.snapshotSmallPhotoPath" width="50px" height="50px"/>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品信息" min-width="300">
        <template slot-scope="scope">
          <div v-if="scope.row.childOrderId">
            <div>
              <span>ProductID：</span>
              <span>{{ scope.row.productId }}</span>
            </div>
            <div>
              <span>产品ID：</span>
              <span>{{ scope.row.collectProductId }}</span>
            </div>
            <div>
              <span>商品编码：</span>
              <span>{{ scope.row.skuCode }}</span>
            </div>
            <div>
              <el-tooltip effect="dark" :content="scope.row.productName" placement="top">
                <el-button type="text">
                  <div class="hidden-box" @click="goPersonalProduct(scope.row)">
                    商品名称：{{ scope.row.productName }}
                  </div>
                </el-button>
              </el-tooltip>
            </div>
            <div>
              <span>买家选择物流方式：</span>
              <span>{{ scope.row.logisticsType }}</span>
            </div>
          </div>
          <div v-else>
            订单号：{{ scope.row.orderId }}
            <div>
              店铺：{{ scope.row.sellerLoginId }}
            </div>
            <div>
              卖家全名：{{ scope.row.sellerSignerFullname }}
            </div>
            <div style="color: #ff4949" v-if="scope.row.statusIntro">
              订单信息：{{ scope.row.statusIntro }}
            </div>
            <div v-if="scope.row.leftEndGoodTime" style="color: #ff4949">
              <span>剩余时间：</span>
              <span>
                <count-down :endTime="endTime(scope.row.leftEndGoodTime)" endText="已结束"/>
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" prop="bizType" min-width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.childOrderId">
            <div>
              <span>采购成本：</span>
              <span v-if="scope.row.orderData.payCurrencyCode == 'USD'">
                {{ scope.row.skuPrice == null ? '未知' : countPrice(scope.row.skuPrice) + 'RMB' }}
              </span>
              <span v-else>
                {{ scope.row.skuPrice == null ? '未知' : countPrice(scope.row.skuPrice) + 'RMB' }}
              </span>
              <div>
                <span>商品数量：</span>
                <span>{{ scope.row.productCount }}</span>
              </div>
              <div>
                <span>商品规格：</span>
                <span>{{ scope.row.skuPropertyIds }}</span>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-if="scope.row.payCurrencyCode == 'USD'">
              <div>订单金额：{{
                  scope.row.payAmount == null ? '未知' : countPrice(scope.row.payAmount) + 'RMB'
                }}
              </div>
              <div>
                联盟佣金：{{
                  scope.row.afflicateFeeRate == null ? '未知' : countPrice(scope.row.afflicateFeeRate) + 'RMB'
                }}
              </div>
              <div>
                交易佣金：{{
                  scope.row.escrowFeeRate == null ? '未知' : countPrice(scope.row.escrowFeeRate) + 'RMB'
                }}
              </div>
              <div>预估利润：
                {{
                  scope.row.estimatedProfit == null ? '未知' : countPrice(scope.row.estimatedProfit) + 'RMB'
                }}
              </div>
            </div>
            <div v-else>
              <div>订单金额：{{
                  scope.row.payAmount == null ? '未知' : countPrice(scope.row.payAmount) + 'RMB'
                }}
              </div>
              <div>
                联盟佣金：{{
                  scope.row.afflicateFeeRate == null ? '未知' : countPrice(scope.row.afflicateFeeRate) + 'RMB'
                }}
              </div>
              <div>
                交易佣金：{{
                  scope.row.escrowFeeRate == null ? '未知' : countPrice(scope.row.escrowFeeRate) + 'RMB'
                }}
              </div>
              <div>预估利润：{{
                  scope.row.estimatedProfit == null ? '未知' : countPrice(scope.row.estimatedProfit) + 'RMB'
                }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="orderStatus" min-width="200">
        <template slot-scope="scope">
          <div v-if="!scope.row.childOrderId">
            <div>创建时间：{{ scope.row.gmtCreate }}</div>
            <div>更新时间： {{ scope.row.updateTime }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.childOrderId">
            <div v-if="statusValue == 111">
              <el-button size="mini" type="text" @click="$emit('openPurchaseInfo',scope.row)">上传采购信息
              </el-button>
              <el-button size="mini" type="text" @click="$emit('openSendInfo',scope.row)">上传发货信息
              </el-button>
            </div>
          </div>
          <div v-else>
            <el-button size="mini" type="text" @click="openOrderDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="text" @click="getOrderLog(scope.row)">查看订单记录</el-button>
            <div v-if="statusValue=='101'">
              <el-button size="mini" type="text" @click="$emit('submitReview',scope.row)">
                提交审核
              </el-button>
              <el-button size="mini" type="text" @click="$emit('selfShipment',scope.row)"
                         v-hasPermi="['system:erp-operate:edit']">转自发货
              </el-button>
            </div>

            <el-button size="mini" type="text" v-if="statusValue == 701"
                       @click="$emit('viewAbnormalCause',scope.row)">查看异常原因
            </el-button>
            <el-button size="mini" type="text" v-if="statusValue == 103  || statusValue == 701"
                       @click="applyCutoff(scope.row)">申请截单
            </el-button>
            <el-button size="mini" type="text"
                       v-show="statusValue == 701 || statusValue == 901 || scope.row.erpInnerOrderStatus != 501"
                       @click="changeShipmentReview(scope.row)">转待发货审核
            </el-button>
            <el-button size="mini" type="text"
                       v-if="statusValue == 701 || statusValue == 100 || statusValue == 502 || statusValue == 101"
                       @click="cancelOrder(scope.row,901)">作废
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!--  申请截单  -->
    <el-dialog
      title="填写截单信息"
      :visible.sync="isApplyCutoffModal"
      width="500px">
      <el-form :model="applyCutoffInfo" :rules="applyCutoffRules" ref="applyCutoffInfo" size="small"
               label-width="100px">
        <el-form-item label="截单原因：" prop="cancelType">
          <el-select v-model="applyCutoffInfo.cancelType" placeholder="请选择截单原因" @change="chooseCancelType">
            <el-option v-for="(item,index) in dict.type.erp_cut_order_type" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="cancelRemark" v-if="applyCutoffInfo.isShowCutoffRemark">
          <el-input type="textarea" v-model="applyCutoffInfo.cancelRemark" placeholder="请输入截单原因（其他原因）"
                    clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isApplyCutoffModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmCutoffOrder">确 定</el-button>
      </div>
    </el-dialog>
    <!--  AE速卖通拉取订单  -->
    <el-dialog
      title="AE从速卖通获取订单"
      :visible.sync="isShowAeOrder"
      width="500px">
      <el-form :model="aeOrderInfo" :rules="aeOrderRules" ref="aeOrderInfo" size="small"
               label-width="120px">
        <el-form-item label="选择店铺：" prop="sellerId">
          <el-select v-model="aeOrderInfo.sellerId" placeholder="请选择店铺">
            <el-option v-for="(item,index) in storeList" :key="index" :label="item.storeName"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单创建时间：" prop="createDateStart">
          <el-date-picker clearable v-model="aeOrderInfo.createDateStart" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择订单创建时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="订单结束时间：" prop="createDateEnd">
          <el-date-picker clearable v-model="aeOrderInfo.createDateEnd" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择订单结束时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAeOrder = false">取 消</el-button>
        <el-button type="primary" @click="getAeOrderList">确 定</el-button>
      </span>
    </el-dialog>
    <!--    订单详情-->
    <order-detail v-if="isOpenOrderDetail" :id="orderId" @orderDetailSwitch="orderDetailSwitch"/>
    <!-- 订单日志 -->
    <order-log v-if="isShowOrderLog" :orderId="orderId" @closeOrderLogModal="closeOrderLogModal"/>
    <!--  从速卖通获取单个订单  -->
    <getOneOrderByAe v-if="isShowAeOneOrder" :storeList="storeList" @close="closeAeOneOrderModal"/>
    <!--  线下物流单号  -->
    <offlineLogisticsOrder v-if="isOpenOfflineLogisticsOrder" :storeList="storeList"
                           @close="closeOfflineLogisticsOrder"/>
    <!--  设置店铺不自动提交sku  -->
    <autoSubmitSku v-if="isOpenSetSubmitSku" @close="isOpenSetSubmitSku = false"/>
  </div>
</template>

<script>
import offlineLogisticsOrder from "@/views/order/components/offlineLogisticsOrder.vue";
import orderDetail from '@/views/components/order/order-detail';
import {
  listSellerOrder,
  alterInnerStatus,
  warehousGoodsOutFPX,
  cutOrderApplication,
  getAEOrderList,
  cancelOrder,
  sellerShipmentForTop
} from '@/api/order/orderApi';
import countDown from '@/views/components/countDown/index';
import orderLog from "@/views/order/components/orderLog.vue";
import getOneOrderByAe from "@/views/order/components/getOneOrderByAe.vue";
import {redReminderForCutOffOrder} from "@/api/order/purchaser";
import {queryCookieInd} from "@/api/shop";
import {getSessionld} from "@/api/autoOperation/python";
import autoSubmitSku from "@/views/order/components/autoSubmitSku.vue";
import {queryUserShopList} from "@/api/shop";

export default {
  name: 'Order-list',
  components: {
    orderDetail,
    countDown,
    orderLog, getOneOrderByAe, offlineLogisticsOrder, autoSubmitSku
  },
  dicts: ['erp_inner_order_status', 'ae_order_type', 'ae_order_status', "erp_cut_order_type", 'county_code', 'erp_order_process_flag'],
  props: {
    statusList: {
      type: Array,
      default: []
    },
    statusValue: {
      type: String / Number,
      default: ""
    }
  },
  data() {
    return {
      isOpenOfflineLogisticsOrder: false,//是否打开线下物流单号弹窗
      isOpenSetSubmitSku: false,//是否打开设置不自动提交sku组件
      checkAll: false,
      aeOrderInfo: {},// ae订单表单信息
      isShowAeOrder: false,//是否显示AE获取订单弹窗
      isShowAeOneOrder: false,//从速卖通获取单个订单
      applyCutoffModal: false,//申请截单弹窗
      isApplyCutoffModal: false,
      applyCutoffInfo: {},
      orderId: '',
      loading: false, // 遮罩层
      chooseOrderList: [], // 选中数组
      multiple: true, // 非多个禁用
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      isOpenOrderDetail: false, // 是否打开订单详情弹窗
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: undefined,
        bizType: undefined,
        gmtCreate: undefined,
        gmtPayTime: undefined,
        orderStatus: undefined,
        erpInnerOrderStatus: this.statusValue,
        userId: "",
        orderProcessFlag: "",
        type: '0',
        statusList: undefined
      }, // 查询参数
      applyCutoffRules: {
        cancelType: [{
          required: true,
          message: '请选择截单原因',
          trigger: 'change'
        }],
        cancelRemark: [{
          required: true,
          message: '请输入截单原因',
          trigger: 'blur'
        }]
      },
      form: '',
      aeOrderRules: {
        sellerId: [{
          required: true,
          message: '店铺不能为空',
          trigger: 'change'
        }],
        createDateStart: [{
          required: false,
          message: '开始时间不能为空',
          trigger: 'change'
        }],
        createDateEnd: [{
          required: false,
          message: '结束时间不能为空',
          trigger: 'change'
        }],
      },
      storeList: [],
      sellerOrderList: [], // 订单表格数据
      checkValue: false,
      isChooseOrder: false,
      childOrderId: "",//子订单id
      isShowOrderLog: false,//是否显示订单日志
      cutOffNum: 0,//截单订单数量
    }
  },
  computed: {
    groupOrderList: {
      get() {
        return this.sellerOrderList
      },
      set(val) {
        this.sellerOrderList = val
      }
    },
    endTime() {
      return time => {
        return new Date(time).getTime() / 1000 + ' '
      }
    },
  },
  created() {
    this.userInfo = this.$store.state.user.urserInfo
    this.getList()
    this.getStoreList()
  },
  methods: {
    // 前往聊天页面
    goChatPage(row) {
      this.storeList.forEach((item) => {
        if (item.storeUserName == row.sellerLoginId) {
          queryCookieInd({storeId: item.id}).then(res => {
            if (res.data) {
              let cookie = res.data.cookie
              let data = {
                "cookie_str": cookie,
                "orderno": row.orderId.toString()
              }
              getSessionld(data).then(res => {
                let sessionId = res.data.sessionId
                this.$router.push({
                  path: "selfOperation/autoChat",
                  query: {
                    sessionId: sessionId,
                    cookie_str: cookie,
                    country: row.aeStoreOrderReceiptAddress.country,
                    orderno: row.orderId
                  }
                })
              })
            } else {
              this.$message.error('该店铺未提交cokkie或cookie已失效，请前往店铺列表提交cookie！')
            }
          })
        }
      })


    },
    // 关闭线下物流单号弹窗
    closeOfflineLogisticsOrder() {
      this.isOpenOfflineLogisticsOrder = false
    },
    // 跳转个人产品库
    goPersonalProduct(row) {
      const params = {v1: row.collectProductId, v2: '0'};
      this.$tab.openPage("产品详情", '/publicgoods/publicProductDetail', params)
    },
    // 关闭从速卖通获取单个订单弹窗
    closeAeOneOrderModal(e) {
      this.isShowAeOneOrder = false
      if (e == '1') {
        this.getList()
      }
    },
    // 打开从速卖通获取单个订单弹窗
    openAeOneOrderModal() {
      this.isShowAeOneOrder = true
    },
    // 从AE获取速卖通订单
    getAeOrderList() {
      getAEOrderList(this.aeOrderInfo).then(response => {
        this.sellerStoreEmpowerList = response.rows;
        this.$message.success(response.msg)
        this.loading = false;
        this.isShowAeOrder = false
        this.getList()
      });
    },
    // 查看订单日志
    getOrderLog(row) {
      this.orderId = row.orderId
      this.isShowOrderLog = true
    },
    // 关闭订单日志
    closeOrderLogModal(e) {
      this.isShowOrderLog = e
    },
    // 全选
    selectAllCheckbox() {
      const ls = [...this.groupOrderList]
      if (this.checkAll == true) {
        this.chooseOrderList = ls.map(item => item.orderId)
      } else {
        this.chooseOrderList = []
      }
      this.multiple = !this.chooseOrderList.length

      ls.forEach((item) => {
        item.checkValue = this.checkAll
      })
      this.groupOrderList = ls
    },
    // 选择单选框
    changeCheckbox(selection) {
      const ls = [...this.groupOrderList]
      ls.forEach((item) => {
        if (selection.orderId == item.orderId) {
          item.checkValue = selection.checkValue
          if (selection.checkValue) {
            this.chooseOrderList.push(selection.orderId)
          } else {
            this.chooseOrderList = this.chooseOrderList.filter(item => item !== selection.orderId);
          }
        }
      })
      this.groupOrderList = ls
      this.multiple = !this.chooseOrderList.length
    },
    // 选择截单原因
    chooseCancelType(e) {
      if (e == "OT") {
        this.applyCutoffInfo.isShowCutoffRemark = true;
      } else {
        this.applyCutoffInfo.isShowCutoffRemark = false;
      }
    },
    // 确定截单
    confirmCutoffOrder() {
      this.$refs["applyCutoffInfo"].validate(valid => {
        if (valid) {
          cutOrderApplication({
            orderId: this.orderId,
            userId: this.userInfo.userId,
            cancelType: this.applyCutoffInfo.cancelType,
            cancelRemark: this.applyCutoffInfo.cancelRemark
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.isApplyCutoffModal = false
            this.applyCutoffInfo.isShowCutoffRemark = false
            this.getList() // 修改完状态后再次获取订单列表
          })
        }
      });
    },
    // 申请截单
    applyCutoff(row) {
      this.orderId = row.orderId
      this.isApplyCutoffModal = true
    },
    // 设置表格颜色
    tableRowClassName({row, rowIndex}) {
      if (!row.childOrderId) {
        return 'warning-row';
      }
    },
    // 转待发货审核
    changeShipmentReview(row) {
      this.$confirm('是否确定将该订单修改为待发货审核状态？').then(() => {
        alterInnerStatus({
          orderIds: row.orderId,
          erpInnerOrderStatus: '101'
        }).then(res => {
          this.$message.success(res.msg)
          this.getList()
        })
      })
    },
    // 作废订单
    cancelOrder(row) {
      this.$confirm('是否确定作废该订单？').then(() => {
        cancelOrder({orderIds: row.orderId}).then(res => {
          this.$message.success(res.msg)
          this.getList() // 修改完状态后再次获取订单列表
        })
      })
    },
    // 订单详情弹窗开关
    orderDetailSwitch(e) {
      this.isOpenOrderDetail = e
    },
    // 获取截单订单数量
    getCutOffNum() {
      redReminderForCutOffOrder().then(response => {
        this.cutOffNum = response.data.cutOffNum
      })
    },
    /** 查询卖家订单列表 */
    getList() {
      this.loading = true
      this.queryParams.statusList = undefined
      let orderProcessFlag = {
        "101": ['begin'],
        "103": ['cainiao', 'offline', 'begin', 'companyEva'],
        "107": ['cainiao', 'offline'],
        "701": ["problem"],
        "901": ["invalid"],
        "502": ["cutoff"],
        "111": ["myself"],
        "110": ["evaluation"],
        "333": ["out"]
      }
      this.queryParams.statusList = this.statusList
      this.queryParams.orderProcessFlag = orderProcessFlag[this.statusValue]
      listSellerOrder(this.queryParams).then(response => {
        let list = response.rows
        this.sellerOrderList = list
        for (let i = 0; i < list.length; i++) {
          this.sellerOrderList[i]['checkValue'] = false
          for (let j = 0; j < list[i].sellerChildOrderList.length; j++) {
            if (list[i].orderId == list[i].sellerChildOrderList[j].orderId) {
              this.sellerOrderList[i].sellerChildOrderList[j]['erpInnerOrderStatus'] = this.sellerOrderList[i].erpInnerOrderStatus
              this.sellerOrderList[i].sellerChildOrderList[j]['orderData'] = this.sellerOrderList[i]
              this.sellerOrderList[i].sellerChildOrderList[j].id = String(this.sellerOrderList[i].sellerChildOrderList[j].id)
            }
          }
        }
        this.chooseOrderList = [] // 清空所选择的订单
        this.total = response.total
        this.loading = false
      })
    },
    //  获取店铺列表
    getStoreList() {
      this.loading = true
      queryUserShopList().then(response => {
        let list = response.data
        this.storeList = list
      })
    },
    // 取消按钮
    cancel() {
      this.isOpenOrderDetail = false
      this.reset()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      console.log(this.queryParams)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //查看订单详情
    openOrderDetail(row) {
      this.orderId = row.orderId
      this.isOpenOrderDetail = true
    },
  }
}
</script>
<style>
.el-table .warning-row {
  background: #fff1ca;
}

.img-box {
  display: flex;
  align-items: flex-start;
}

.hidden-box {
  width: 500px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
